import React, { Component } from 'react';

import { connect } from "react-redux";


import indexCss from "./index.module.scss";

// 高阶组件  增强组件功能的  
import {withRouter  } from "react-router-dom";



class Index extends Component {

  // 属性的默认值
  static defaultProps={
    iconMapColor:"#fff"
  }

  // 点击 跳转到 城市搜索页面
  goCityList=()=>{
    
    // history 不存在 ??  
    // console.log(this.props.history);
    this.props.history.push("/cityList");
  }
  render() {
    return (
      <div className={indexCss.city_Search} >
        <div className={indexCss.city_Search_form}>
          <div onClick={this.goCityList}  className={indexCss.city_label}>{this.props.cityName}</div>
          <div className={indexCss.city_input}>
            <i className="iconfont icon-seach"></i>
            <span>请输入小区或地址</span>
            </div>
        </div>
        <div className={indexCss.city_Search_icon}>
          {/* <i className={"iconfont icon-map  " +indexCss.iconmap}></i> */}
          <i 
          style={{color:this.props.iconMapColor}}
          onClick={()=>this.props.history.push("/mapFound")}
          className="iconfont icon-map"></i>
        </div>
      </div>
    );
  }
}


// 映射对象 将仓库中的数据映射到  组件的属性中
const mapStateToProps = (state) => ({
  cityName: state.mapReducer.cityName
})


// 高阶组件 高阶函数
export default withRouter(connect(mapStateToProps)(Index));

